<template>
    <div>
        <el-button type="primary" :icon="Plus" @click="$router.push({ name: 'addbanner' })">添加轮播图</el-button>
        <!-- table 表格 -->
        <el-table :data="newTableData" style="width: 100%">
            <el-table-column align="center" label="序号" width="180">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.$index + 1 + (currentPage - 1) * pageSize }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="图片" width="180">
                <template #default="scope">
                    <el-image style="width: 100px;" preview-teleported :src="scope.row.img"
                        :preview-src-list="[scope.row.img]" fit="cover" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="link" label="链接" width="180"></el-table-column>
            <el-table-column align="center" prop="alt" label="提示" width="180"></el-table-column>
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[2, 4, 8, 10]"
            :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang='ts'>
// 导入权限页面判断
import { nopermission } from '@/utils/nopermission';
nopermission()

// 引入图标
import { Plus } from '@element-plus/icons-vue'
//tableData 中的每一项数据类型 
interface itemType {
    alt: string
    bannerid: string
    img: string,
    link: string
}

// 引入轮播图接口
import { getbannerlistApi } from '@/api/banner';
import { onMounted, ref, computed } from 'vue';
// 轮播图列表数据
const tableData = ref<Array<itemType>>([])
onMounted(() => {
    // 初始化请求轮播图列表数据
    getlistFn()
})
const getlistFn = () => {
    getbannerlistApi().then((res: any) => {
        // console.log('res', res);
        if (res.code == 200) {
            tableData.value = res.data
        }
    })
}

// 分页
const currentPage = ref<number>(1);
const pageSize = ref<number>(2);
// 切换每页条数事件
const handleSizeChange = (val: number) => {
    console.log(val);
}
// 切换当前页数事件
const handleCurrentChange = (val: number) => {
    console.log(val);
}
// 计算属性获取当前页数的数据
const newTableData = computed(() => tableData.value.filter((item, index) => index >= (currentPage.value - 1) * pageSize.value && index < currentPage.value * pageSize.value
))


// 删除轮播图
import { delbannerApi } from '@/api/banner'
// 删除事件
const handleDelete = (index: number, row: itemType) => {
    // console.log(index, row);
    delbannerApi({
        bannerid: row.bannerid
    }).then((res: any) => {
        if (res.code == 200) {
            // 重新请求轮播图列表数据
            getlistFn()
        }
    })

}




</script>
<style scoped lang="scss">
.el-pagination {
    margin-top: 20px;
}
</style>